<!-- 根据 ivu-carousel 封装的图片预览组件 -->
<template>
    <div class="ivu-carousel">
        <Button class="left ivu-carousel-arrow ivu-carousel-arrow-hover"
                @click="handleImgLeft"
                v-show="previewImgLeftVisible">
            <Icon type="chevron-left"></Icon>
        </Button>
        <Row type="flex" justify="center">
            <Div ref="testDiv" :style="{backgroundImage:`url(${imgSrc})`}" style="height: 100%;width: 100%;background-size: auto 100%;background-repeat: no-repeat;background-position: center top;" >
                <div style="padding: 60%"></div>
            </Div>
        </Row>
        <Button class="right ivu-carousel-arrow ivu-carousel-arrow-hover"
                @click="handleImgRight"
                v-show="previewImgRightVisible">
            <Icon type="chevron-right"></Icon>
        </Button>
    </div>
</template>
<script>
    export default {
        name:"Gallery",
        props:{
            imgList:Array,
        },
        data(){
          return{
              currentIndex:0,
              test:{
                backgroundImage:""
              },
              imgSrc:"",
          }
        },
        computed:{
            total:function () {
                return this.imgList.length
            },
            previewImgLeftVisible:function () {
                return this.currentIndex > 0
            },
            previewImgRightVisible:function () {
                return this.currentIndex < this.total - 1
            }
        },
        mounted(){
            document.addEventListener("keydown", this.handleKeyDown);
            this.update()
        },
        beforeDestroy (){
            document.removeEventListener('keydown', this.handleKeyDown);
        },
        methods:{
            handleKeyDown(e){
                switch (e.keyCode){
                    case 37:
                        this.handleImgLeft()
                        break;
                    case 39:
                        this.handleImgRight()
                        break;
                }
            },
            handleImgLeft(){
                if(this.currentIndex > 0){
                    this.currentIndex--
                }
            },
            handleImgRight(){
                if(this.currentIndex < this.total){
                    this.currentIndex++
//                    this.imgSrc = "url("+this.imgList[this.currentIndex+1]+")"
                }
            },
            update(){
//                console.log("update")
                let src = this.imgList[this.currentIndex]
                this.$refs['testDiv'].style.backgroundImage = "url(" + src + ")"
//                console.log(this.$refs['testDiv'].style.backgroundImage)
            }
        },
        watch:{
            imgList:function () {
                this.update();
//                this.imgSrc = this.imgList[this.currentIndex]
            },
            currentIndex:function(){
                this.update();
//                this.imgSrc = this.imgList[this.currentIndex]
            }
        }
    }
</script>